<!-- pages/order/confirm/index.vue -->
<template>
  <view class="container">
    <!-- 收货详情 -->
<!--    <view class="address-details">
	  <button class="add-address-btn" @click="openAddressModal">新增收货地址</button>
	  
	  <!- 地址模态框组件 -->
<!-- 	  <address-modal :show="isAddressModalVisible" @confirm="handleAddressConfirm"></address-modal> -->
  <!--  </view> --> 
         <view class="form-item">
         	<view class="label">收货地址</view>
         	<view class="select-view" @click="showSelectPatientDialog">
        		<view class="placeholder" v-if="!currentPatientInfo.assistiveContactName">请选择</view>
         		<view v-else>{{ currentPatientInfo.assistiveContactAddress }}</view>
         		<image src="../../static/item_go.png" class="icon"></image>
         	</view>
         </view>
    <!-- 商品信息 -->
    <view class="product-section">
      <view class="product-card" v-for="(item, index) in gridList" :index="index">
        <image class="product-image" :src="item.assisitveImg" mode="aspectFill"></image>
        <view class="product-info">
          <view class="product-name">{{ item.assisitveName }}</view>
          <view class="product-spec">4.8英寸极清双屏</view>
          <view class="product-price-row">
            <text class="product-price">¥{{ item.assisitvePrice }}</text>
            <view class="quantity-selector">
              <picker @change="handleQuantityChange" :value="quantity" :range="[1,2,3,4,5]">
                <view class="picker-view">
                  <text>{{quantity}}</text>
                  <image class="arrow-down" src="/static/icons/arrow-down.png" mode="aspectFit"></image>
                </view>
              </picker>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 促销信息 -->
      <view class="promotion-row">
        <view class="promotion-tag">限时特惠</view>
        <view class="discount-tag">满126减15元</view>
        <text class="promotion-price">-¥7.75</text>
      </view>
    </view>

    <!-- 分隔线 -->
    <view class="divider"></view>

    <!-- 收货方式 -->
    <view class="delivery-section">
      <view class="delivery-item">
        <text>收货方式</text>
        <view class="delivery-value">
          <text>送货上门</text>
          <view class="arrow-right"></view>
        </view>
      </view>
    </view>

    <!-- 医生信息 -->
    <view class="doctor-section">
      <view class="doctor-info">
        <text>关联医生</text>
        <view class="doctor-details">
          <text class="doctor-name">王医生</text>
          <view class="doctor-contact">
            <text>176xxx9773</text>
            <text class="doctor-area">环城西路社区</text>
          </view>
        </view>
      </view>
      <view class="doctor-qr">
        <image src="/static/images/qr-code.png" mode="aspectFit"></image>
        <text class="qr-tip">扫码添加医生</text>
      </view>
    </view>

    <!-- 金额信息 -->
    <view class="price-section">
      <view class="price-item">
        <text>商品金额</text>
        <text class="price">¥{{price}}</text>
      </view>
      <view class="price-item">
        <text>运费</text>
        <text class="price">¥0.00</text>
      </view>
      <view class="price-item">
        <text>优惠券</text>
        <text class="price">无可用</text>
      </view>
      <view class="total-price">
        <text>合计：</text>
        <text class="total">¥{{price}}</text>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view class="footer">
      <view class="order-summary">
        <text>共1件 合计：</text>
        <text class="order-total">¥{{price}}</text>
      </view>
      <button class="pay-button" @click="handlePay">立即支付</button>
    </view>
	
	<uni-popup ref="popup" type="bottom" @change="patientDialogchange">
		<view class="popup-view">
			<view class="title-view">
				<view class="title">选择地址</view>
				<view class="close-btn-view" @click="closeSelectPatientDialog">
					<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/pop_close.png" class="close-btn"></image>
				</view>
			</view>
	
			<view>
				<scroll-view scroll-y="true">
					<view class="item" v-for="(item, index) in patientInfoList">
						<view class="select-button" style="margin-right: 10rpx" @click="onPatientInfoChange(index)">
							<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/tab_select_have.png" v-if="currentPatientInfoIndex === index">
							</image>
							<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/assisitdev/tab_select_not.png" v-else></image>
						</view>
						<view class="right-view">
							<view class="name-view">
								<view>{{ item.assistiveContactName }}</view>
								<view class="phone">{{ item.assistiveContactPhone }}</view>
							</view>
							<view class="adder-view">
								{{ item.assistiveContactAddress }}&nbsp;{{ item.assistiveContactDetailed }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
	
			<view class="add-view">
				<view class="add-btn" @click="navToNewPatient">新增地址</view>
			</view>
		</view>
	</uni-popup>
  </view>
  
  
</template>

<script>
import * as assistDev from '../../common/api/assistDev.js'
export default {
  data() {
    return {
	isAddressModalVisible: false,
      quantity: 1,
	  gridList: [],
	  currentPatientInfo: {},
	  patientInfoList: [],
	  currentPatientInfoIndex: null,
	  initCurrentCode:'',
	  price:'',
      assistiveDevideId:'',
	  assistiveContactId:'',
      productInfo: {
        name: '可孚血压计医用电子血压测量仪家用老人医用级上臂式血压计',
        spec: '4.8英寸极清双屏',
        price: 104.25,
        originalPrice: 148.60,
        image: '/static/images/blood-pressure.png'
      },
      doctorInfo: {
        name: '王医生',
        phone: '176xxx9773',
        community: '环城西路社区'
      }
    }
  },
  onLoad(opt) {
  	console.log("opt",opt);
  	if(opt.code){
  		this.initCurrentCode = opt.code
		this.getDeviceInfo()
  	}
	this.getPatientInfoList()
  },
  methods: {
	  getDeviceInfo() {
	  	const param = {
	  		assisitveName:this.initCurrentCode
	  	}
	  	assistDev.getDeviceInfo(
	  		param).then(result => {
	  		console.log("result",result);
	  		this.gridList = result.data.data || []
			this.price=result.data.data[0].assisitvePrice
			this.assistiveDevideId=result.data.data[0].id
	  	}).catch(error => {
	  		console.log(error);
	  	})
	  },
	  onPatientInfoChange(e) {
	  	console.log(e);
	  	this.currentPatientInfo = this.patientInfoList[e]
	  	console.log(this.currentPatientInfo)
	  
	  	this.currentPatientInfoIndex = e
	  	this.closeSelectPatientDialog()
	  },
	  getPatientInfoList() {
	  	const param = {
	  		assistiveContactWx: uni.getStorageSync('openid_key')
	  	}
	  	assistDev.queryContactList(param).then(result => {
	  		this.patientInfoList = result.data.data
	  	}).catch(error => {
	  		console.log(error);
	  	})
		
		assistDev.queryContactList(param).then(result => {
		this.currentPatientInfo = result.data.data[0] || {}
		this.assistiveContactId = result.data.data[0].id
		}).catch(error => {
			console.log(error);
		})
	  	
	  },
	  showSelectPatientDialog() {
	  	this.$refs.popup.open()
	  },
	  closeSelectPatientDialog() {
	  	this.$refs.popup.close()
	  },
	  navToNewPatient() {
	  	uni.navigateTo({
	  		url: "/accessoryRentalPages/pages/index/AddressModal"
	  	})
	  	this.closeSelectPatientDialog()
	  },
	  patientDialogchange(e) {
	  	this.show = e.show
	  	if (e.show) {
	  		this.getPatientInfoList()
	  	}
	  },
    handleQuantityChange(e) {
      this.quantity = parseInt(e.detail.value[0]) || 1;
      this.calculatePrice();
    },
    calculatePrice() {
      // 实际项目中应从后端获取商品价格并计算
      const totalPrice = this.productInfo.price * this.quantity;
      this.$set(this.productInfo, 'totalPrice', totalPrice);
    },
    handlePay() {
		uni.showLoading({
		  title: '正在发起支付...'
		});
		const param = {
			assistiveDevideId: this.assistiveDevideId,
			assistiveContactId: this.assistiveContactId,
			assistiveOrderPrice:this.price
		}
		//调用API保存地址
			
		assistDev.addAssistiveOrder(param).then((res) => {
				 if (res.data.code == 200) {
				   this.pay(res.data.data);
				 }
		  // uni.navigateBack()
		})
    },
	pay(result) {
	  console.log("result", result);
	  const data = result;
	  const orderInfo = {
	    appid: data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
	    nonceStr: data.nonceStr, // 随机字符串
	    package: data.package, // 固定值
	    timeStamp: data.timeStamp, // 时间戳（单位：秒）
	    paySign: data.paySign, // 签名，这里用的 MD5/RSA 签名
	    signType: data.signType,
	  };
	  console.log("orderInfo", orderInfo);
	  uni.requestPayment({
	    provider: "wxpay",
	    ...orderInfo,
	    success(res) {
	      console.log("支付成功", res);
	      uni.showToast({
	        icon: "success",
	        title: "支付成功",
	        complete() {
	          setTimeout(() => {
	            uni.navigateBack();
	          }, 2000);
	        },
	      });
	    },
	    fail(err) {
	      console.log("支付失败", err);
	      uni.showToast({
	        icon: "none",
	        title: "支付失败",
	      });
	    },
	  });
	}
  }
}
</script>

<style lang="scss">
	.select-button {
		width: 40rpx;
		height: 40rpx;
	
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.popup-view {
		width: 100%;
		background: white;
		padding: 40rpx;
		box-sizing: border-box;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		display: flex;
		flex-direction: column;
	
		.title-view {
			position: relative;
			display: flex;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 10rpx 0;
	
			.title {
				color: #232323;
				font-size: 32rpx;
				font-weight: bold;
			}
	
			.close-btn-view {
				width: 80rpx;
				height: 80rpx;
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 0;
	
				.close-btn {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	
		scroll-view {
			width: 100%;
			// height: 25vh;
			max-height: 25vh;
		}
	
		.item {
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: solid 2rpx #f8f8f8;
			padding-top: 36rpx;
			padding-bottom: 36rpx;
	
			radio {
				transform: scale(0.7);
			}
	
			.right-view {
				flex: 1;
	
				.name-view {
					display: flex;
					color: #232323;
					font-size: 30rpx;
					font-weight: bold;
	
					.phone {
						margin-left: 28rpx;
					}
				}
	
				.adder-view {
					color: rgba(35, 35, 35, 0.5);
					font-size: 24rpx;
				}
			}
		}
	
		.add-view {
			width: 100%;
			margin-top: 52rpx;
			margin-bottom: 46rpx;
	
			.add-btn {
				width: 100%;
				height: 88rpx;
				background: #0bc5ae;
				border-radius: 48rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 30rpx;
			}
		}
	}
	.form-item {
		width: 100%;
		min-height: 180rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: solid 1px #f8f8f8;
		display: flex;
		flex-direction: column;
	
		.label {
			color: #232323;
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
	
			&::after {
				content: "*";
				color: #e74242;
			}
		}
	
		.select-view {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
	
			.content {
				color: #232323;
				width: 100%;
			}
	
			.placeholder {
				color: rgba(35, 35, 35, 0.4);
			}
	
			.icon {
				width: 24rpx;
				height: 24rpx;
			}
		}
	
		.date-picker-view {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32rpx;
	
			.content {
				color: #232323;
				width: 100%;
			}
	
			.placeholder {
				color: rgba(35, 35, 35, 0.4);
			}
	
			.icon {
				width: 24rpx;
				height: 24rpx;
			}
	
			.date-picker-inner {
				display: flex;
				align-items: center;
				width: 100%;
			}
		}
	}
.container {
  padding-bottom: 120rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 收货信息 */
.address-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: relative;

  .default-tag {
    background-color: #e64340;
    color: #fff;
    font-size: 24rpx;
    padding: 4rpx 10rpx;
    border-radius: 4rpx;
    margin-right: 10rpx;
  }

  .location-icon {
    margin-right: 10rpx;
  }

  .address-area {
    font-size: 28rpx;
    color: #333;
  }

  .arrow-right {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 16rpx;
    height: 16rpx;
    border-top: 2rpx solid #ccc;
    border-right: 2rpx solid #ccc;
    transform: translateY(-50%) rotate(45deg);
  }
}

.address-details {
  padding: 20rpx 30rpx;
  background-color: #fff;

  .address-title {
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 10rpx;
  }

  .contact-info {
    display: flex;
    font-size: 28rpx;
    color: #666;

    .name {
      margin-right: 20rpx;
    }
  }
}

/* 商品信息 */
.product-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx 30rpx;

  .product-card {
    display: flex;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;

    .product-image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .product-info {
      flex: 1;

      .product-name {
        font-size: 28rpx;
        color: #333;
        line-height: 1.4;
        margin-bottom: 10rpx;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .product-spec {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
      }

      .product-price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .product-price {
          font-size: 32rpx;
          color: #e64340;
          font-weight: 500;
        }

        .quantity-selector {
          display: flex;
          align-items: center;

          .picker-view {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            color: #333;

            .arrow-down {
              width: 24rpx;
              height: 24rpx;
              margin-left: 6rpx;
            }
          }
        }
      }
    }
  }

  .promotion-row {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .promotion-tag {
      font-size: 24rpx;
      color: #fff;
      background-color: #e64340;
      padding: 4rpx 8rpx;
      border-radius: 4rpx;
      margin-right: 10rpx;
    }

    .discount-tag {
      font-size: 24rpx;
      color: #fff;
      background-color: #ff9500;
      padding: 4rpx 8rpx;
      border-radius: 4rpx;
      margin-right: 10rpx;
    }

    .promotion-price {
      font-size: 28rpx;
      color: #e64340;
      font-weight: 500;
    }
  }
}

.divider {
  height: 20rpx;
  background-color: #f5f5f5;
}

/* 收货方式 */
.delivery-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;

  .delivery-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 28rpx;
    color: #333;

    .delivery-value {
      display: flex;
      align-items: center;
    }
  }
}

/* 医生信息 */
.doctor-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;

  .doctor-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    font-size: 28rpx;
    color: #333;

    .doctor-details {
      display: flex;
      flex: 1;
      margin-left: 20rpx;

      .doctor-name {
        font-weight: 500;
        margin-right: 20rpx;
      }

      .doctor-contact {
        display: flex;
        flex: 1;
        font-size: 26rpx;
        color: #666;

        .doctor-area {
          margin-left: 20rpx;
        }
      }
    }
  }

  .doctor-qr {
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 8rpx;
      margin-bottom: 10rpx;
    }

    .qr-tip {
      font-size: 24rpx;
      color: #666;
    }
  }
}

/* 金额信息 */
.price-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;

  .price-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    font-size: 28rpx;
    color: #333;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .total-price {
    display: flex;
    justify-content: space-between;
    font-weight: 500;
  }

  .price {
    color: #333;
  }

  .total {
    color: #e64340;
    font-size: 32rpx;
    font-weight: bold;
  }
}

/* 底部结算栏 */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

  .order-summary {
    font-size: 28rpx;
    color: #333;
  }

  .order-total {
    color: #e64340;
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 10rpx;
  }

  .pay-button {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #e64340;
    color: #fff;
    font-size: 32rpx;
    border-radius: 40rpx;
    margin-left: 20rpx;
  }
}
</style>